<template>
  <ul class="col-detail">
    <li class="col-item" v-for="(item, index) in configs" :key="index">
      <label class="item-label">{{item.label}}：</label>
      <template v-if="item.type === 'button'">
        <div class="item-content">
          <el-button link type="primary" v-for="(btn, index) in item.buttons" :key="index" v-bind="btn">{{ btn.name }}</el-button>
        </div>
      </template>
      <template v-else>
        <template v-if="item.value">
          <div class="item-content" v-html="item.value(info)"></div>
        </template>
        <template v-else>
          <div class="item-content">{{ info[item.key] }}</div>
        </template>
      </template>
    </li>
  </ul>
  <AccountList ref="accListRef" />
  <ContactAccount ref="accRef" />
</template>
<script setup lang="ts">
import AccountList from './AccountList.vue'
import ContactAccount from './ContactAccount.vue'
import {ref} from 'vue'

type Prop = {
  info: any
}

const props = withDefaults(defineProps<Prop>(), {
})

const accListRef = ref()
const accRef = ref()

const configs = [
  {
    label: '设备名',
    key: 'name'
  },
  {
    label: '供应商',
    key: 'vendor_name'
  },
  {
    label: '所属机房',
    key: 'room'
  },
  {
    label: '管理IP',
    key: 'manage_ip'
  },
  {
    label: '设备类型',
    key: 'category_name'
  },
  {
    label: '所属区域',
    key: 'netzone_name'
  },
  {
    label: '序列号',
    key: 'serial_num'
  },
  {
    label: '硬件型号',
    key: 'model_name',
    value: (row:any) => row.model_name || '未获取'
  },
  {
    label: '设备角色',
    key: 'role_name'
  },
  {
    label: '设备状态',
    key: 'status'
  },
  {
    label: '软件版本',
    key: 'soft_version'
  },
  {
    label: '机房模块',
    key: 'model'
  },
  {
    label: 'HA状态',
    key: 'ha_status_name'
  },
  {
    label: '补丁版本',
    key: 'patch_version'
  },
  {
    label: '机柜',
    key: 'rack_name'
  },
  {
    label: '框式编号',
    key: 'slot'
  },
  {
    label: '上线日期',
    key: 'uptime'
  },
  {
    label: 'U位',
    key: '',
    value: (row:any) => (row.u_location_start || '') + '-' + (row.u_location_end || '')
  },
  {
    label: '管理账户',
    key: 'adpp_device'
  },
  {
    label: '维保日期',
    key: 'expire'
  },
  {
    label: '变更轨迹',
    key: '_change_gj',
    type: 'button',
    buttons: [
      {
        name: '变更轨迹',
        onclick: () => {
        }
      }
    ]
  },
  {
    label: '1G端口使用',
    key: '',
  },
  {
    label: '10G端口使用',
    key: '',
  },
  {
    label: '共计使用',
    key: '',
  },
  {
    label: '账户',
    key: '_account',
    type: 'button',
    buttons: [
      {
        name: '查看账户',
        onclick: () => {
          handleViewAccount()
        }
      },
      {
        name: '关联账户',
        onclick: () => {
          handleRelaAccount()
        }
      },
      {
        name: '绑定IP',
        onclick: () => {
          handleBindIp()
        }
      }
    ]
  },
  {
    label: 'BGBU',
    key: 'bgbu'
  },
  {
    label: '监控状态',
    key: '',
    value: () => ''
  },
  {
    label: '采集方案',
    key: 'plan_name'
  },
  {
    label: '备注',
    key: 'memo'
  },
]

const handleViewAccount = () => {
  accListRef.value.open(props.info)
}

const handleRelaAccount = () => {
  accRef.value.open(props.info)
}
const handleBindIp = () => {}

</script>
<style lang="scss" scoped>
@import "../scss/col-detail.scss";
</style>